<template>
	<view>
		
		<block class="list_fox" v-for="(item, i) in data" :key="i">
		  <view  class="list_item" @click="gotochat(i)">
			<block>
				<image class="ima" :src="photo[i]"></image>
			    <view>
				    <view class="name">{{nickname[i]}}</view>
					<view class="fox_text">{{item.msg.slice(-1)[0].text}}</view>
				</view>	
				
				<view style="position: fixed; right: 0; margin-top: 8px; margin-right: 10px;" >
					<view v-if="miss_msg[i] != 0 && show" class="miss">{{miss_msg[i]}}</view>
				</view>
			</block>
		  </view>
		</block>
	
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				timer: null,
				data: [],
				recv_id: [],
				photo: [],
				nickname: [],
				miss_msg: [],
				show: false
			};
		},
		onLoad(e) {
			this.cha()
		},
		onShow() {
			let that = this
		    this.timer = setInterval(function () {
				that.cha()
			   }, 1500)
		},
		onUnload() {
		    if(this.timer) {
		      	clearInterval(this.timer);
		      	this.timer = null;
		    }
		},
		computed: {
			...mapState('m_my', ['user_id'])
		},
		methods: {
			async cha(){
				const db = uniCloud.database();
				//用await保证函数彻底执行完，数据返回完毕后再执行下面的代码,limit(1),取第一条数据，get(),执行查询操作
				this.res = await db.collection("chat").get();
				//获得的数据藏在res.result.data里，取值就行了
				
				this.data = this.res.result.data.filter(x => (x.id1 == this.user_id || x.id2 == this.user_id)) || []
				
				if(!this.data) return
				
				for(let i = 0; i<this.data.length; i++){
					if(this.data[i].id1 == this.user_id){
						if(this.recv_id.indexOf(this.data[i].id2) == -1){
							this.recv_id.push(this.data[i].id2)
						}
					}else{
						if(this.recv_id.indexOf(this.data[i].id1) == -1){
							this.recv_id.push(this.data[i].id1)
						}
					}		
				}
				
				for(let i = 0; i<this.recv_id.length; i++){
					let res2 = await db.collection('user').where({
							"openid": this.recv_id[i]
						}).get()
					this.photo.push(res2.result.data[0].photo)
					this.nickname.push(res2.result.data[0].nickname)
					
					let res3 = await db.collection('store_message').where({
						"send_id": this.user_id,
						"recv_id": this.recv_id[i]
					}).get()
					let really_msg = 0
					if(this.data[i].id1 == this.user_id){
						really_msg = this.data[i].id2_num
					}else{
						really_msg = this.data[i].id1_num
					}
					if(really_msg > res3.result.data[0].recv_num){
						this.miss_msg[i] = (really_msg - res3.result.data[0].recv_num)
					}else{
						this.miss_msg[i] = 0
					}	
				}		
				this.show = true
			},
			gotochat(i) {
				uni.navigateTo({
				  	url: '/subpkg/chat/chat?recv_id=' + this.recv_id[i]
				})
			}
		}
	}
</script>

<style lang="scss">

	 .ima{
	   width: 120rpx ;
	   height: 120rpx;
	   border-radius: 50%;
	 }
	 .list_item{
	   margin: 10rpx 10rpx;
	   padding: 10rpx;
	   display: flex;
	   flex-direction: row;
	   border-bottom: 1px solid darkgray;
	 }
	 .name{
	  margin: 2rpx 2rpx 10rpx 30rpx;
	  color: black;
	  font-size: 30rpx;
	  font-weight: bold;
	 }


	 .fox_text{
	   font-size: 17px;
	   display: flex;
	   align-items: center;
	   margin-left: 13px;
	   margin-bottom: 10px;
	   margin-top: 7px;
	   color: darkgray;
	 }

	.miss {
		background-color: #C00000; 
		color: white; 
		border-radius: 50%; 
		width: 20px; 
		height: 20px; 
		display: flex; 
		justify-content: center; 
		align-items: center;
	}

</style>
